import React, { Component } from 'react'
import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'
import request from './utils/request'

export default class App extends Component {
  state = {
    list: [],
  }
  async componentDidMount() {
    // !#1
    const r = await request.get('/')
    this.setState({ list: r.data })
  }
  render() {
    const { list } = this.state
    return (
      <section className='todoapp'>
        {/* TodoHeader */}
        <TodoHeader />
        {/* TodoMain */}
        <TodoMain list={list} />
        {/* TodoFooter */}
        <TodoFooter />
      </section>
    )
  }
}
